<template>
  <el-dialog :visible.sync="dialogVisible" :before-close="cancel">
    <div class="title"></div>
    <template slot="title">禁言设置</template>
   <el-form :model="form" ref="refForm" label-width="180px" :rules="rules">
      <el-form-item label="会员账号：" prop="target_account">
        <el-col :span="16">
          <el-input :value="form.target_account" disabled>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="会员昵称：" prop="target_nick">
        <el-col :span="16">
          <el-input :value="form.target_nick" disabled>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="会员类型：" prop="target_type">
        <el-col :span="16">
          <el-input :value="form.target_type == 0 ? '本站会员' : (form.target_type == 1 ? '外部拉取' : '-')"  disabled>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="禁言时长：" prop="ttl">
        <el-col :span="16">
          <el-select v-model="form.ttl" style="width: 100%;">
            <el-option
              v-for="item in ttlList"
              :label="unitTime(item.value,item.unit)"
              :value="item.ttl"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="禁言类别：" prop="cate">
        <el-col :span="16">
          <el-select v-model="form.cate" style="width: 100%;">
            <el-option
              v-for="item in cateList"
              :label="item.name"
              :value="item.name"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-col :span="16">
        <el-input type="textarea" :rows="4" v-model="form.remark"></el-input>
        </el-col>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel" >取 消</el-button>
      <el-button type="primary" @click="submit('refForm')">确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>

import { form } from '@/build';
import { unitTime } from '@/utils/base';
import { getBannedTime, getcate, postUserBan } from '@/services/api/chatRoom';

export default {
  name: 'ban-dialog',
  props: ['dialogVisible', 'rowData'],
  mixins: [form],
  data() {
    return {
      tableData: [],
      ttlList: [],
      cateList: [],
      form: {
        uid: this.$store.state.user.userInfo.userId,
        account: this.$store.state.user.userInfo.username,
        target_type: this.rowData.target_type,
        target_uid: this.rowData.target_uid,
        target_nick: this.rowData.target_nick,
        target_account: this.rowData.target_account,
        ttl: undefined,
        ttl_text: undefined,
        cate: undefined,
        remark: '',
      },
      rules: {
        ttl: [
          { required: true, message: '请选择禁言时长', trigger: 'change' },
        ],
        cate: [
          { required: true, message: '请选择禁言类别', trigger: 'change' },
        ],

      },
    };
  },
  mounted() {
    this.bindGet(getBannedTime, 'ttlList', {
      action: 'getBannedTime',
    });
    this.bindGet(getcate, 'cateList', {
      action: 'getcate',
    });
    this.getAll();
    this.bindSave(postUserBan, 'saveForm', 'form', {
      afterSuccess: ([result, data]) => {
        if (result) {
          this.$parent.gridSearch();
        }
        return data;
      },
    });
  },

  methods: {
    unitTime,
    cancel() {
      this.$emit('cancel');
    },
    submit(formName) {
      const { ttl } = this.form;
      const ttlText = this.ttlList.find(item => Number(item.ttl === ttl));
      if (Number(ttlText.unit) === 0) {
        this.form.ttl_text = '永久';
        this.form.ttl = 0;
      } else {
        const info = consts.CHATROOM_BAN_TIME.find((item) => {
          return Number(item.value) === Number(ttlText.unit);
        });
        const title = _.isUndefined(info) ? '' : info.title;
        this.form.ttl_text = ttlText.value + title;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.doSave({ action: 'saveForm', form: formName });
          this.cancel();
        } else {
          return false;
        }
      });
    },
  },

};
</script>

<style lang="scss" scoped>
 .title{
   margin-bottom: 10px;
   font-weight: bold;
 }

</style>
